$(function () {
    $('#icon-dg').datagrid({
        striped: true,
        pagination: true,
        rownumbers: true,
        fitColumns: true,
        scrollbarSize: 0,
        width: "auto",
        url: 'iconSetting?method=findByPage',
        onBeforeSelect: function () {
            return false;
        },
        columns: [[
            {
                field: 'icon', title: '图标', width: 0, formatter: function (value, row, index) {
                    return "<span class='show-icon " + value + "'></span>";
                }, align: 'center'
            },
            {field: 'instructions', title: '图标说明', width: 30},
            {field: 'user', title: '创建用户', width: 15},
            {field: 'role', title: '用户权限', width: 15},
            {field: 'createdTime', title: '创建时间', width: 15, align: 'center'},
            {field: 'updatedTime', title: '更新时间', width: 15, align: 'center'},
            {
                field: 'id', title: '操作', width: 15, formatter: function (value, row, index) {
                    let edit = '<button type="button" class="btn btn-primary btn-xs" name="edit" data-value="' + value + '" onclick="edit(' + value + ')"><i class="fa fa-pencil"></i>&nbsp;编辑</button>&nbsp;<button type="button" class="btn btn-danger btn-xs" name="del" data-value="' + value + '" onclick="deleteIcon(' + value + ',\'' + row.icon + '\')"><i class="fa fa-trash"></i>&nbsp;删除</button>';
                    return value === 0 ? "" : edit;
                }, align: 'center'
            },
        ]],
        toolbar: [
            {
                iconCls: 'icon-add',
                text: "新增",
                handler: function () {
                    $("#add").window('open');
                    $("#iconCls").focus();
                }
            }
        ]
    });

    $("#add").window({
        width: 768,
        height: 300,
        title: '新增图标',
        iconCls: 'icon-add',
        collapsible: true,
        minimizable: false,
        maximizable: false,
        resizable: false,
        closed: true
    });

    $("#edit").window({
        width: 768,
        height: 300,
        title: '编辑图标',
        iconCls: 'icon-save',
        collapsible: true,
        minimizable: false,
        maximizable: false,
        resizable: false,
        closed: true
    });

    $("#addIcon").click(function () {
        addIcon();
        $("#add").window('close');
        $("#icon-dg").datagrid('reload');
        $("#iconCls").val("");
        $("#desc").val("");
    });

    $("#addIconContinue").click(function () {
        addIcon();
        $("#icon-dg").datagrid('reload');
        $("#iconCls").val("").focus();
        $("#desc").val("");
    });

    $("#editIcon").on("click", function () {
        $.post("iconSetting", {
            method: "update",
            id: $("#iconId").val(),
            desc: $.trim($("#descEdit").val())
        }, function (data) {
            if (data.status === 20000) {
                layer.msg(data.msg, {icon: 1, time: 1000}, function () {
                    $('#icon-dg').datagrid('reload');
                });
            } else {
                layer.msg(data.msg, {icon: 2});
            }
            $("#edit").window("close");
        }, "json");
    });
});

function addIcon() {
    let iconCls = $("#iconPrefix").val() + $("#iconCls").val(),
        desc = $("#desc").val();
    if ($.trim(iconCls).length === 0 || $.trim(desc).length === 0) {
        return;
    }
    $.ajax({
        type: "post",
        url: "iconSetting",
        data: {
            method: "save",
            iconCls: iconCls,
            desc: desc
        },
        dataType: "json",
        success: function (data) {

        },
        error: function () {
            layer.msg("未知错误，请联系系统管理员", {icon: 2});
        }
    });
}

function edit(id) {
    $.get("iconSetting", {"method": "findById", "id": id}, function (result) {
        var _data = result.data;
        $("#iconShow").removeClass().addClass('show-icon').addClass(_data.icon);
        $("#descEdit").val(_data.instructions);
        $("#iconId").val(id);
        $("#edit").window('open');
    }, "json");
}

function deleteIcon(id, icon) {
    layer.confirm("确认删除<span class='show-icon " + icon + "' style='vertical-align: middle;'></span>吗？", {
        title: "删除确认",
        icon: 3
    }, function (index) {
        $.get("iconSetting", {"method": "delete", "id": id}, function (result) {
            if (result.status === 20000) {
                layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                    $('#icon-dg').datagrid('reload');
                });
            } else {
                layer.msg(result.msg, {icon: 2});
            }
        }, "json");
        layer.close(index);
    });
}

function change() {
    let icon = $("#iconPrefix").val() + $.trim($("#iconCls").val());
    $("#showIcon").removeClass().addClass('show-icon').addClass(icon);
}